
<!-- start: Wrapper -->
<?php
    $friends = $this->friends;
    $user_id = $this->user_id;
/*
echo '<pre>';
print_r($friends);
echo '</pre>';
*/
?>
<!--
<div class="container">
    <div class="sixteen columns ">
        <div class="post post-page">
            <div id="page-title-icon"></div>
            <div id="page-title-icon-inner">
                <i class="ico-google-maps ico-white"></i>
            </div>
            <section id="page-title">
                <h2>Danh Sách Bạn Bè </h2>
            </section>
        </div>
    </div>
</div>
-->

<div id="wrapper" class="white-wrapper">
    <div class="container">

        <!-- start: 4colums Friend List -->
        <div class="four columns">
            <h3>Bạn Bè</h3>
            <ul class="friend_list_ul">
                <?php foreach($friends as $f){ ?>
                    <li class="friend_item">
                        <a class="name"  friend_id="<?php echo $f->friend_id ?>" title="<?php echo $f->name; ?>"><img style="float: left;
margin-right: 10px;width: 30%;margin-bottom: 10px;" src="<?php echo $f->avatar; ?>" height="75" width="75"> <h5><?php echo $f->name; ?></h5>
                        </a>
                        <a class="info" title="Thông Tin Của: <?php echo $f->name; ?>"  href="/user/usersearchprofile/<?php echo $f->friend_id; ?>">Thông Tin</a>

                        <a class="product" title="Danh Sách Các Sản Phẩm Của: <?php echo $f->name; ?>"  href="/user/topic/<?php echo $f->friend_id; ?>">Danh Sách Sản Phẩm</a>
                    </li>
                <?php } ?>
            </ul>
        </div>
        <!-- end: 4 Columns -->

        <!-- start: 12 Columns message of friend -->
        <div class="twelve columns">
            <!--start tab -->
            <ul class="tabs-nav">
                <li class="active" id="recent_new_btn"><a href="#tab1"><i class="mini-ico-glass"></i>Tin Nhắn Mới </a></li>
                <li><a href="#tab2"><i class="mini-ico-list"></i>Danh Sách Các Tin Nhắn</a></li>
                <li><a href="#tab3" id="recent_new_product_btn"><i class="mini-ico-pencil"></i>Sản Phẩm Mới Của Bạn Bè </a></li>
            </ul>

            <div class="tabs-container">
                <div class="tab-content" id="tab1">
                    <div id="message_load_new">
                    </div>
                </div>
                <div class="tab-content" id="tab2">
                    <ul>
                        <li>
                            <h3>Tin Nhắn</h3>
                            <div id="message_load">
                            </div>
                        </li>
                        <li>
                        <li>
                            <div class="field">
                                <textarea class="text textarea" id="message_content"></textarea>
                            </div>
                            <div class="field">
                                <input type="hidden" id="from_id" name="from_id" value="<?php echo $user_id; ?>">
                                <input type="hidden" id="to_id" name="to_id" value="">
                                <input type="button" name="message_content" class="button color" id="btn_send" value="Send Message">
                            </div>
                        </li>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="tab3">
                    <div id="product_load"></div>
                    <div id="end_product_load"> Tải Thêm </div>
                </div>

            </div>

            <!--end tab -->


            </div>

        </div>
        <!-- end: 12 Columns -->



    </div>
</div>
<style>
    .friend_item:hover {
        background-color: #e9f8ff;
    }
    .friend_item {
        float: left;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        width: 100%;
    }
    .friend_item a.name{
        float: left;
        width: 60%;
        cursor: pointer;
    }
    .friend_item a.name img{
        float: left;
        margin-right: 10px;
        width: 45%;
        margin-bottom: 10px;
    }
    .friend_item a.info{
        float: right;
        width: 30%;
        margin-top: 13px;
    }
    .friend_item a.product{
        float: left;
        width: 97%;
        text-align: right;
    }
    .friend_list_ul, #message_load, #tab3{
        width: 100%;
        height: 356px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #tab3{
        width: 94%;
        height: 513px;
    }
    .friend_list_ul{
        height: 555px;
    }
    #end_product_load{
        float: left;
        width: 100%;
        background-color: #ffbb09;
        padding: 10px;
        text-align: center;
        color: white;
        cursor: pointer;
        font-size: 20px;
    }
</style>


<script>
    $(document).ready(function(){
        var _page = 1;
        $('#recent_new_btn').click(function(){
            loadNewMessage();
        })
        //btn.replay
        $(document).on('click','.btn_replay', function(){
            var friend_id = $(this).attr('data-friend-id');
            $('#to_id').val(friend_id);
            var message_id = $(this).attr('data-message-id');
            $.ajax({
                url: '/user/updatemessagestatus',
                data: {message_id: message_id },
                type: 'post',
                success:function(data){
                    $('#message_load').empty();
                    $('#message_load').append(data);
                }
            }).done(function(){
                    load_message(friend_id);
                    $('#tab1').hide();
                    $('#tab3').hide();
                    $('#tab2').show();
                })

        })

        //load message by friend
        $('.name').click(function(){

            $('#tab1').hide();
            $('#tab3').hide();
            $('#tab2').show();
            var data = $(this).attr('friend_id');
            $('#to_id').val(data);
            load_message(data);
        })

        //load new message ajax
        loadNewMessage();

        //send button click
        $('#btn_send').click(function(){
            var to_id = $('#to_id').val();
            var from_id = $('#from_id').val();
            var message_content = $('#message_content').val();

            $.ajax({
                url: '/user/inbox',
                data: {to_user: to_id, message_content: message_content  },
                type: 'post',
                success:function(data){
                    $('#message_load').empty();
                    $('#message_load').append(data);
                }
            })
            //reload message posted
            load_message(to_id);
        })

        //load message by ajax
        function load_message(data){
            $(".overlay-loading").fadeIn(500);
            $.ajax({
                url: '/user/getfriendmessage',
                data: {friend_id: data },
                type: 'get',
                success:function(data){
                    $('#message_load').empty();
                    $('#message_load').append(data);
                    $(".overlay-loading").fadeOut(500);
                }
            })
        }
        //load new message by ajax
        function loadNewMessage(){
            $(".overlay-loading").fadeIn(500);
            //load new message ajax
            $.ajax({
                url: '/user/message/<?php echo $user_id ?>',
                //data: {to_user: to_id, message_content: message_content  },
                type: 'get',
                success:function(data){
                    $('#message_load_new').empty();
                    $('#message_load_new').append(data);
                    $(".overlay-loading").fadeOut(1000);
                }
            })
        }

        //load mew message auto
        var time = 60000;
        var tid = setTimeout(RealTimeFetchNewMessage, time);
        function RealTimeFetchNewMessage() {
            //alert('1');
            // do some stuff...
            $.ajax({
                url: "/admin/user/loadnewemailajax",
                type: "get"

            }).done(function(data){

                    if(data>0)
                    {

                        loadNewMessage();
                    }

                });
            tid = setTimeout(RealTimeFetchNewMessage, time); // repeat myself
        }
        //

        //load new friend product by btn
        $('#recent_new_product_btn').click(function(){
            _page = 1;
            $('#product_load').empty();
            loadNewProduct();
        })

        //load new friend's product
        function loadNewProduct(){
            $.ajax({
                url: "/user/getfriendtopic",
                type: "get",
                data: {page: _page}

            }).done(function(data){

                    $('#product_load').append(data);

            });
            _page = parseInt(_page) + 1;
        }

        //load new product by scroll
        /*$( "#tab3" ).scroll(function(){


            if( $('#tab3').scrollTop() + $('#tab3').height() < $('#end_product_load').offset().top){
                loadNewProduct();
                console.log( $('#tab3').scrollTop() + $('#tab3').height());
                console.log('--');
                console.log($('#end_product_load').offset().top);
            }



        });*/
        $('#end_product_load').click(function(){
            _page = parseInt(_page) + 1;
            loadNewProduct();
        })
    })







</script>